<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngulaJ基于模块化集合列表数据</title>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/angular-route.min.js" ></script>
	</head>
	<!--ng-app相当于入口-->
	<body ng-app="myapp">
		<div>
			<h1>HEAD</h1>
			<ul>
				<a href="#/">首页</a>
				<a href="#/users">用户管理</a>
				<a href="#/products">商品管理</a>
			</ul>
		</div>
		<!--显示不同页面内容-->
		<!--ng-view显示路由调用的页面-->
		<div ng-view></div>
		<div>
			<h1>ROOT</h1>
		</div>
	</body>
	<script type="text/javascript">
		//初始化,这个ngRoute不能少
		var myapp=angular.module("myapp",["ngRoute"]);
		//配置路由
		myapp.config(["$routeProvider",function($routeProvider){
			//设置路由对应页面
			$routeProvider.when("/",{
				templateUrl: '5_1.html'
			}).when("/users",{
				templateUrl :'5_2.html'
			}).when("/products",{
				templateUrl :'5_3.html'
			}).otherwise({
				//这是默认的跳转路径
				redirectTo: '/'
			});
		}]);
			
		//另一种用占位符的方式，减少不必要的代码的书写
// 		myapp.config(["$routeProvider",function($routeProvider){
// 			$routeProvider.when("/:name",{
// 				templateUrl:function(route){
// 					return "./route_"+route.name+".html";
// 				}
// 			});
// 		}]);
	</script>
</html>
